<template>
	<view class="login">
		<view class="welcome">
			<view class="weltop"><text>你好,</text></view>
			<view class="welbot"><text>欢迎来到乐推联盟</text></view>
		</view>
		<view class="login_ipt">
			<u-input
				placeholder="手机号/用户名"
				:height="height"
				:trim="trim"
				:clearable="clearable"
				:password-icon="false"
				:custom-style="iptsty"
				v-model="form.username"
				type="text"
				:border="border"
			/>
			<u-input
				placeholder="密码"
				:height="height"
				:trim="trim"
				:clearable="clearable"
				:cursor-spacing="100"
				:password-icon="false"
				:custom-style="iptsty"
				v-model="form.password"
				type="password"
				:border="border"
			/>
			<view class="sms u-flex u-col-center u-m-b-60">
				<u-input
					placeholder="验证码"
					:height="height"
					:trim="trim"
					:clearable="clearable"
					:cursor-spacing="100"
					:password-icon="false"
					:custom-style="{
						backgroundColor: '#F8F8F8'
					}"
					v-model="form.sms"
					type="text"
					:border="border"
				/>
				<u-image style="margin-left:16rpx" width="372rpx" @click="getValidateCode" height="90rpx" :src="smsimg"></u-image>
			</view>
			<u-button
				size="default"
				:ripple="true"
				:hair-line="false"
				:disabled="disabled"
				:custom-style="{
					color: '#333333',
					backgroundColor: disabled == true ? '#DFDFDF' : '#FFDB28',
					border: 'none'
				}"
				@click="dologin"
			>
				登 录
			</u-button>
			<view class="ofter_btn u-flex u-row-between u-m-t-24">
				<navigator url="/pages/login/register" hover-class="navigator-hover"><text style="color:#787882">注册账号</text></navigator>
				<navigator url="/pages/login/retrievepass" hover-class="navigator-hover"><text style="color:#787882">忘记密码?</text></navigator>
			</view>
		</view>
		<u-toast ref="uToast"></u-toast>
		<view class="footer">
			登录即表明同意
			<text style="color: #000000;">《乐推用户协议》</text>
			和
			<text style="color: #000000;">《隐私政策》</text>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			disabled: true,
			value: '',
			clearable: false,
			trim: true,
			border: false,
			height: 90,
			iptsty: {
				backgroundColor: '#F8F8F8',
				marginBottom: '28rpx'
			},
			loginsty: {
				color: '#333333',
				backgroundColor: '#FFDB28',
				border: 'none'
			},
			smsimg: '',
			form: {
				username: '',
				password: '',
				sms: '',
				codeid: ''
			},
			opt: {}
		};
	},
	watch: {
		'form.username': function(val) {
			// console.log(this.form.username);
			if (val !== '') {
				if (this.form.password !== '' && this.form.sms.length == 5) {
					this.disabled = false;
				}
			} else {
				this.disabled = true;
			}
		},
		'form.password': function(val) {
			// console.log(this.form.password);
			if (val !== '') {
				if (this.form.username !== '' && this.form.sms.length == 5) {
					this.disabled = false;
				}
			} else {
				this.disabled = true;
			}
		},
		'form.sms': function(val) {
			// console.log(this.form.sms);
			if (this.form.sms.length == 5) {
				if (this.form.username !== '' && this.form.password !== '') {
					this.disabled = false;
				}
			} else {
				this.disabled = true;
			}
		}
	},
	onLoad: function(option) {
		console.log(option);
		this.opt = option;
	},
	onReady() {
		if (this.opt.register) {
			this.$refs.uToast.show({
				title: '注册成功!',
				type: 'success'
			});
		}
		this.getValidateCode();
	},
	methods: {
		// 获取图形验证码
		getValidateCode() {
			this.$u.api.getValidateCode().then(res => {
				// console.log(res)
				if (res.data) {
					this.smsimg = res.data.pic.replace(/[\r\n]/g, '');
					this.form.codeid = res.data.key;
					this.form.sms = ""
				} else {
					this.$u.toast('请求出现错误!');
				}
			});
		},
		dologin() {
			if (this.form.username == '' && this.form.password == '' && this.form.sms == '') {
				this.$u.toast('请检查表单！');
			} else {
				// console.log('参数', this.form);
				this.$u.api
					.dologin({
						mobile: this.form.username,
						pass: this.form.password,
						code_id: this.form.codeid,
						code: this.form.sms
					})
					.then(res => {
						// console.log('登录返回', res);
						if ((res.code = 200)) {
							uni.setStorage({
								key: 'token',
								data: res.data.token
							});
							setTimeout(() => {
								this.$u.api
									.getuserinfo()
									.then(res => {
										// console.log(res);
										if (res.code == 200) {
											uni.setStorage({
												key: 'userinfo',
												data: res.data
											});
											uni.reLaunch({
												url: '/pages/index/index?username=' + res.data.user
											});
										}
									})
									.catch(err => {
										console.log(err);
									});
							}, 100);
						}
					})
					.catch(err => {
						this.getValidateCode()
						this.$refs.uToast.show({
							title: err.msg,
							type: 'error'
						});
					});
			}
		}
	}
};
</script>

<style lang="scss" scoped>
.login {
	.welcome {
		color: rgba(16, 16, 16, 1);
		font-size: 52rpx;
		text-align: left;
		padding-top: 200rpx;
		padding-left: 50rpx;
		padding-bottom: 144rpx;
		font-weight: bolder;
		.welbot {
			margin-top: 20rpx;
		}
	}
	.login_ipt::v-deep {
		width: 640rpx;
		margin: 0 auto;
		.uni-input-placeholder {
			left: 36rpx;
		}
		.uni-input-input {
			text-indent: 35rpx;
		}
		/* #ifdef MP */
		.u-input .u-input__input {
			display: block;
			padding-left: 36rpx !important;
		}
		/* #endif */
	}
	.footer {
		width: 640rpx;
		margin-top: 200rpx;
		margin-left: 90rpx;
		color: rgba(120, 120, 130, 1);
		font-size: 26rpx;
		// text-align: left;
	}
}
</style>
